<template>
  <div style="width: 100%; margin: 0px auto" v-loading="loading">
    <div
      class="header"
      style="background-color: white; height: 50px; margin-bottom: 10px"
    >
      <el-row>
        <el-col :span="24">
          <div
            style="float: right; right: 5px; position: absolute"
            class="buttonStyle"
          >
            <el-button
              icon="el-icon-refresh"
              type="primary"
              plain
              @click="handleUserInfo()"
              >&nbsp;同步用户</el-button
            >
            <el-button
              icon="el-icon-s-operation"
              type="primary"
              plain
              @click="handleUserRole"
              >&nbsp;分配角色</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="body" :style="{ height: heightTree }">
      <template>
        <div>
          <vxe-table
            :height="tableHeightY"
            ref="multipleTable"
            :data="tableData"
            border
            highlight-current-row
            @current-change="handleCurrentRow"
            @row-dblclick="onEditUser"
            style="width: 100%"
          >
            <vxe-column type="seq" width="50"></vxe-column>
            <vxe-column field="userName" title="用户名称"></vxe-column>
            <vxe-column field="userNo" title="用户账号"></vxe-column>
          </vxe-table>
          <vxe-pager
            background
            align="left"
            :current-page.sync="query.pageCurrent"
            :page-size.sync="query.pageSize"
            :total="query.dataTotal"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'NextJump',
              'Sizes',
              'FullJump',
              'Total',
            ]"
            @page-change="handleSizeChange"
          >
          </vxe-pager>
        </div>
      </template>
    </div>
    <userRolePop v-if="userRolePopFlag" ref="userRolePopRefs" @onChange="handleSelectChange"></userRolePop>
  </div>
</template>
<script>
import {
  getUserList,
  getUserSync,
  getUserRoleSearch,
} from "@/api/datacentersg/achives/documentApi";
import userRolePop from "@/views/datacentersg/archives/documentUser/userRolePop";
import store from "@/store";

export default {
  name: "PersonList",
  components: {
    userRolePop,
  },
  data: () => ({
    socketDialogInfoVisible: false,
    num: 100,
    input: "",
    query: {
      userName: null,
      userNo: null,
      pageCurrent: 1,
      pageSize: 20,
      dataTotal: 0,
    },
    heightTree: window.innerHeight - 180 + "px",
    //选中行
    currentRow: null,
    tableData: [],
    tableHeightY: window.innerHeight - 235 + "px",
    loading: false,
    userPopFlag: false,
    userRolePopFlag: false,
    selectList:[],
  }),
  computed: {},
  mounted() {
    this.initData();
  },
  methods: {
    handleUserInfo() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
      };
      getUserSync(params).then((res) => {
        if (res.result) {
          this.$message({
            type: "success",
            message: "同步用户成功",
          });
          this.initData();
        }
      });
    },
    handleSelectChange(list){
      this.selectList = [...list]
      console.log(this.selectList,"selectList");
    },
    handleUserRole() {
      //判断当前选中行
      if (this.currentRow == null || this.currentRow == undefined) {
        this.$message({
          type: "warning",
          message: "请选中一行",
        });
        return;
      }
      this.userRolePopFlag = true;
      this.$nextTick(() => {
        this.$refs.userRolePopRefs.initData(this.currentRow,[...this.selectList]);
      });
    },
    initData() {
      const params = {
        data: {
          currentPage: this.query.pageCurrent, // 当前多少页
          pageSize: this.query.pageSize, // 每页显示数据
        },
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
      };
      getUserList(params).then((res) => {
        if (res.result) {
          this.tableData = res.resultdata.data;
          this.query.dataTotal = res.resultdata.count;
        }
      });
    },
    //选中行
    handleCurrentRow(currentRow) {
      this.currentRow = currentRow.row;
    },
    handleSizeChange(val) {
      this.query.pageCurrent = val.currentPage;
      this.query.pageSize = val.pageSize;
      this.initData();
    },
    handleCurrentChange(val) {
      this.query.pageCurrent = val;
      this.initData();
    },
    onEditUser() {
      this.userPopFlag = true;
      this.$nextTick(() => {
        this.$refs.userPopRefs.initEdit(this.currentRow);
      });
    },
    onAddSuccess(type) {
      this.showOrgJurisdiction = false;
    },
  },
};
</script>

<style scoped>
.buttonStyle {
  margin: 10px 0px 5px 0;
}
>>> .vxe-header--column .vxe-cell--title {
  font-size: 12px;
  font-weight: normal;
  color: #909399;
}
>>> .vxe-cell--label {
  font-size: 12px;
}
</style>
